<template>
  <el-dialog v-if="load" :close-on-click-modal="false" :title="form.phone_id ? '手机号信息' : '添加手机号信息'" v-model="visible" align-center width="1200px" @close="handleClose">
    <el-form ref="formRef" :model="form" label-position="top">
      <div class="grid grid-cols-3 gap-x-3">
        <el-form-item label="手机号码" prop="phone_num" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input-number v-model="form.phone_num" :controls="false" :min="0" :step="1" :precision="0" placeholder="请输入" class="w-full" />
        </el-form-item>
        <el-form-item label="号源" prop="phone_source" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <VSelect v-model="form.phone_source" :options="options.phone_source" class="w-full" placeholder="请选择" />
        </el-form-item>
        <!--          <el-form-item label="&nbsp;" prop="phone_country" style="width: 100px">-->
        <!--            <VSelect v-model="form.phone_country" :options="options.phone_country" class="w-full" placeholder="请选择" />-->
        <!--          </el-form-item>-->

        <v-group class="w-full items-end">
          <el-form-item label="号码地区" prop="phone_country" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
            <VSelect v-model="form.phone_country" :clearable="false" :options="options.phone_country" class="w-32" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="" prop="phone_area_ids" :rules="[{ required: form.phone_country !== 2, message: '不能为空', trigger: 'change' }]">
            <VCascader v-if="form.phone_country !== 2" v-model="form.phone_area_ids" type="3" :areaLevel="2" class="w-full" show-all-levels placeholder="请选择"
              @change="({ labels }) => form.phone_area_names = labels" />
          </el-form-item>
        </v-group>
        <el-form-item label="号码类型" prop="phone_type" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <VSelect v-model="form.phone_type" :options="options.phone_type" class="w-full" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="绑定实体号" prop="entity_num" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input v-model="form.entity_num" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="手机号实名认证人" prop="real_name_witness" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input v-model="form.real_name_witness" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="使用店铺" class="col-span-3">
          <UseShop ref="shopRef" v-model="form.bind_shops" :options="shopOptions" />
        </el-form-item>
        <el-form-item label="认证状态">
          <el-radio-group v-model="form.auth_status">
            <el-radio v-for="(d, i) in options.auth_status" :key="i" :label="d.value">{{ d.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="form.label" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="管理负责人" prop="manager_id" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <VCascader v-model="form.manager_id" placeholder="请选择" class="w-full" />
          <!--          <VSelect v-model="form.manager_id" :options="options.manager" class="w-full" placeholder="请选择" />-->
        </el-form-item>
        <el-form-item label="到期日期" prop="expiry_date" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <el-date-picker v-model="form.expiry_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="号码状态">
          <el-radio-group v-model="form.phone_status">
            <el-radio v-for="(d, i) in options.phone_status" :key="i" :label="d.value">{{ d.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" class="col-span-full">
          <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" placeholder="请输入" :maxlength="800" show-word-limit />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" :loading="loadings.create" @click="create(formRef)">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '../api'
import { ElMessage } from 'element-plus'
import UseShop from './UseShop'

const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
const success = ref(false)
let loadings = reactive({})

const shopRef = ref()
const shopOptions = computed(() => (form.value.platform_shop || props.options.platform_shop || []).map(d => ({ value: d.platform_id, label: d.platform_name, children: d.shops.map(s => ({ ...s, label: s.shop_name, value: s.shop_id })) })))

// 表单处理
const formRef = ref()
const form = ref({})

// 打开弹窗
const open = async (id) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  shopRef?.value?.init()
  form.value = {
    "phone_num": null,
    "phone_source": '',
    "phone_area_ids": [],
    "phone_area_names": [],
    "phone_type": '',
    "entity_num": "",
    "auth_status": 1,
    "label": "",
    "manager_id": '',
    "phone_country": 1,
    "expiry_date": "",
    "phone_status": 1,
    "bind_ids": [],
    "bind_shops": [],
    "remark": ""
  }
  loadings = reactive({})
  success.value = false
  visible.value = true
  await 1
  formRef?.value?.resetFields()
  if (id) {
    const res = await api.detail({ phone_id: id })
    form.value = res.data
  }

}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
  success.value && emit('success')
}
// 提交
const create = async (formRef) => {
  const validator = await formRef.validate()
  if (!validator) return
  loadings.create = true
  api[form.value.phone_id ? 'edit' : 'create'](form.value).then(res => {
    ElMessage.success('保存成功')
    success.value = true
    close()
  }).finally(() => {
    loadings.create = false
  })
}

defineExpose({ open })
</script>